<template>
  <div :loading="loading">
    <el-input placeholder="请输入名称或编码" v-model="filterText" clearable prefix-icon="el-icon-search">
    </el-input>
    <el-tree ref="tree" style="padding-top: 10px" :data="viewModuleOptions.data" node-key="id"
             :expand-on-click-node="false" :highlight-current="true" :props="{ label: 'name' }"
             :default-expand-all="true" :filter-node-method="filterNode" @node-click="nodeClick"
             @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse">
      <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(data)"
            @mouseleave="mouseout(data)">
        <el-tooltip class="item" effect="dark" :content="node.label" placement="top" :open-delay="500">
          <span class="node-label">{{ node.label }}</span>
        </el-tooltip>
        <div v-show="data.dropdownShow" @click.stop="() => { }"
             v-hasPermi="['sysDept:add','sysDept:update','sysDept:delete']">
          <el-dropdown placement="right-start" trigger="click">
            <i class="el-icon-s-operation"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus"
                                @click.native="initDialog({ref:addUpdateDialogRef})"
                                v-hasPermi="['sysDept:add']">新增部门</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit-outline"
                                @click.native="initDialog({ref:addUpdateDialogRef,row:data})"
                                v-hasPermi="['sysDept:update']">修改部门</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete-solid" @click.native="handleDelete(data)"
                                v-hasPermi="['sysDept:delete']">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </span>
    </el-tree>
    <!-- 添加、修改 -->
    <add-update :ref="addUpdateDialogRef"
                :getDataList="getDataList"/>
  </div>
</template>

<script>
import viewModule1 from '@/mixins/vxe-grid.js';
import addUpdate from "./add-update2.vue";

export default {
  name: 'TreeSide',
  components: {addUpdate},
  mixins: [viewModule1],
  data() {
    return {
      addUpdateDialogRef: 'addUpdateDialogRef',
      viewModuleOptions: {
        // activatedIsNeed: false,
        dataUrl: '/sysDept/tree',
        removeUrl: '/sysDept',
      },
      filterText: '',
      defaultExpandIds: [], // 这里存放要默认展开的节点 id
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // this.getDataList().then(res => {
    //   if (this.viewModuleOptions.data) {
    //     let first = this.viewModuleOptions.data[0]
    //     this.defaultExpandIds.push(first.id)
    //     this.$refs.tree.setCurrentKey(first.id)
    //     this.nodeClick(first)
    //   }
    // })
  },
  methods: {
    mouseover(data) { // 鼠标移入
      this.$set(data, 'dropdownShow', true)
    },
    mouseout(data) { // 鼠标移除
      this.$set(data, 'dropdownShow', false)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    nodeClick(data) {
      this.$emit('sysDeptFun', data.id)
    },// 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false
      this.defaultExpandIds.some(item => {
        if (item === data.id) { // 判断当前节点是否存在， 存在不做处理
          flag = true
          return true
        }
      })
      if (!flag) { // 不存在则存到数组里
        this.defaultExpandIds.push(data.id)
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      // 删除当前关闭的节点
      this.defaultExpandIds.some((item, i) => {
        if (item === data.id) {
          this.defaultExpandIds.splice(i, 1)
        }
      })
      this.removeChildrenIds(data) // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    },
    // 删除树子节点
    removeChildrenIds(data) {
      const ts = this
      if (data.children) {
        data.children.forEach(function (item) {
          const index = ts.defaultExpandIds.indexOf(item.id)
          if (index > 0) {
            ts.defaultExpandIds.splice(index, 1)
          }
          ts.removeChildrenIds(item)
        })
      }
    }
  }
}
</script>
